<template>
	<view>
		<view class="bg-#F6F9F8 h-100vh">
			<view :style="{ height: statusBarHeight + 'px' }">
				<custom_navbar :title="navbar_title" theme="light" />
			</view>
				<view class="detail-tips" v-if="isOpenLocation" :style="{top: statusBarHeight + 'px'}">
				<text>开启定位，体验AR导航</text>
				<view class="detail-open" @click="openLocation()">去开启</view>
			</view>
			<view class="scenic_list_tab">
				<view class="scenic_list_tab_one" :class="on_1" @tap="clickThis(1)">
					推荐排序
				</view>
				<view class="scenic_list_tab_one" :class="on_2" @tap="clickThis(2)">
					距离排序
				</view>
			</view>


			<view class="punch-list">

				<view class="list-box">
					<view v-if="punchList.length != 0">
						<view class="scenic_list_one" v-for="(item, index) in punchList" :key="index">
							<view class="scenic_list_one_l">
								<image :src="item.face" class="scenic_list_one_l_img" />
							</view>
							<view class="scenic_list_one_r">
								<view class="scenic_list_one_r_1">{{item.title}}</view>
								<view class="scenic_list_one_r_2">距离{{item.distance}} 千米</view>
								<view class="scenic_list_one_r_3">
									<view class="scenic_list_one_r_3_btn">
										<image  class="scenic_list_one_r_3_btn_1" src="@/static/images/go.png"/>
										<view class="scenic_list_one_r_3_btn_2" @tap="to_map(item)">去这里</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-else class="list-nodata">暂无数据</view>
				</view>
			</view>
			
			<view class="nav_icon" @tap="go_map">
				<image src="@/static/images/map_nav.png"/>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		navigateTo,
		navigateBack
	} from "@/hooks";
	import custom_navbar from "@/components/custom_navbar/index.vue";
	// import uParse from '@/components/u-parse/u-parse.vue';
	import store from "@/store";
	import {
		naviScenicSpots
	} from "@/api/home.js";

	export default {
		components: {
			custom_navbar
			// uParse
		},
		data() {
			return {
				navigateTo,
				navigateBack,
				navbar_title: "景区列表",
				statusBarHeight: 20,
				on_1: '',
				on_2: '',
				curPage: 0,
				total: 0,
				punchList: [],
				spotId: 0,
				points_type: '',
				isOpenLocation: false,
				locate:{
					lng:"",
					lat:""
				}
			};
		},
		computed: {
			rec_url() {
				return this.$store.getters.rec_url;
			}
		},

		mounted() {
			let that = this;
			const info = uni.getSystemInfoSync();
			that.statusBarHeight = info.statusBarHeight + 43;

		},
		onShow(){
			
		},
		onLoad(options) {
			if (options.id) {
				this.spotId = Number(options.id);
			}
			
			//this.getPunchList();
			// 是否已经获得地理授权
			wx.getSetting({
				success: res => {
					if (res.authSetting['scope.userLocation']) {
						// 已经授权，可以直接调用获取位置信息的方法
						//this.getLocation();
					} else {
						// 未授权，展示一个提示框，引导用户去授权
						this.showAuthorizePrompt();
						this.isOpenLocation = true;
					}
				}
			});

			this.clickThis(1);

		},
		methods: {
			go_map(){
				uni.$emit('from_scenic_list',{});
				// uni.redirectTo({
				// 	url:'/pagesA/ar_navigation/index'
				// })
				uni.navigateBack()
			},
			
			to_map(item) {
				
				store.commit("userInfo/set_audio_show", false);
			   // uni.setStorageSync("scenic_detail", JSON.stringify({ item, spot_id: item.spot_id, detail: { markerId: item.id}, from: "punch" }));
				uni.$emit('from_scenic_list_point',{id:item.id});
				uni.navigateBack();
			},
			
			
			// loadMore() {
			// 	let isLoad = Math.ceil(this.total / 10) > this.curPage;
			// 	if (isLoad) {
			// 		this.getPunchList();
			// 	}
			// },
			getPunchList() {
				
				if(!this.locate.lng || !this.locate.lat){
					uni.showToast({
					   title: '请授权获取您的地理位置',
					   icon: 'none',
					});
					return false;
				}
				
				
				let params = {
					page: this.curPage + 1,
					limit: 6,
					spot_id: this.spotId,
					points_type: this.points_type,
					locate_lng:this.locate.lng,
					locate_lat:this.locate.lat,
				};
				
				naviScenicSpots(params).then(res => {
					if (res.code == 200) {
						this.curPage = params.page;
						this.total = res.data.total;
						let datas = [...this.punchList];
						if (res.data.length > 0) {
							if (params.page > 1) {
								datas.push(...res.data)
							} else {
								datas = res.data;
							}
							datas.map(item => {
								if (item.face) {
									item.face = this.rec_url + item.face;
								}
								
								item.distance = Math.round(item.locate_distance / 1000 * 100) / 100;
								return item;
							})
						} else {
							datas = [];
						}
						this.punchList = datas;
					}
				})

			},
			clickThis(t) {
				if (t == 1) {
					this.on_1 = 'on';
					this.on_2 = '';

				} else {
					this.on_2 = 'on';
					this.on_1 = '';
				}		

				this.curPage = 0;
				this.total= 0;
				this.punchList = [];
				this.points_type = t;
				
				console.log('@@@@@@@@@@@@@',t)
				
				wx.getLocation({
					type: 'gcj02 ', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于地图的坐标
					success: (res) => {
						this.locate.lat = res.latitude;
						this.locate.lng = res.longitude;
						this.getPunchList();
						
					},
					fail: (err) => {
						uni.showToast({
						   title: '请授权获取您的地理位置',
						   icon: 'none',
						});
						return false;
					}
				});
				
				
			},
			getLocation() {
				wx.getLocation({
					type: 'gcj02 ', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于地图的坐标
					success: (res) => {
						this.locate.lat = res.latitude;
						this.locate.lng = res.longitude;
						
						//console.log('---',this.locate);
						//console.log('已获取到当前位置：', res);
					},
					fail: (err) => {
						// console.error('获取位置信息失败：', err);
					}
				});
			},


			openLocation() {
				wx.openSetting({
					success: (res) => {
						// console.log('重新获取地址成功：', res);
						if (res.authSetting['scope.userLocation']) {
							// 已经授权，可以直接调用获取位置信息的方法
							this.getLocation();
							this.isOpenLocation = false;
						} else {
							// 未授权，展示一个提示框，引导用户去授权
							this.showAuthorizePrompt();
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './this.scss';

	.punch-list {

		background-color: #F6F9F8;

		.list-box {
			padding: 30rpx 24rpx 40rpx 30rpx;
			background-color: #F6F9F8;
		}

		.list-nodata {
			height: 200rpx;
			line-height: 200rpx;
			text-align: center;
			background-color: #fff;
			border-radius: 32rpx;
		}
	}
</style>